<template>
  <el-row>
    <div>
      <div>
        <div>请选择省份：</div>
        <div>
          <el-radio-group v-model="province" class="ml-4">
            <el-radio v-for="item in ProvinceEnum" :label=item.label :key=item.label size="large">{{
                item.name
              }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <div>
        <div>请选择类型：</div>
        <el-radio-group v-model="typeClass" class="ml-4">
          <el-radio v-for="item in typeEnum" :label=item :key=item size="large">{{ item }}</el-radio>
        </el-radio-group>
      </div>
      <div>
        <ElButton @click=submit type="primary">提交</ElButton>
      </div>
    </div>
    <el-col :span="12">
      <T5Echarts :province-price-trend-options="provincePriceTrendOptions"
                 :show-province-month-price-trend="showProvinceMonthPriceTrend"></T5Echarts>
    </el-col>
    <el-col :span="12">
      <T2Echarts :pig-price-locate-options="pigPriceLocateOptions"
                 :show-pig-price-locate="showPigPriceLocate"></T2Echarts>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="12">
      <T3Echarts :province-average-max-price-options="provinceAverageMaxPriceOptions"
                 :show-province-average-max-price="showProvinceAverageMaxPrice"></T3Echarts>
    </el-col>
    <el-col :span="12">
      <T6Echarts :province-week-price-trend-options="provinceWeekPriceTrendOptions"
                 :show-province-week-price-trend="showProvinceWeekPriceTrend"></T6Echarts>
    </el-col>
  </el-row>
</template>

<script setup>
import {ProvinceEnum} from "../data/enum.js";
import T5Echarts from "./T5Echarts.vue";
import T2Echarts from "./T2Echarts.vue";
import {ref} from "vue";
import {
  getGuangXiMonthPriceTrend,
  getPigPriceLocate,
  getProvinceAverageMaxPrice,
  getWeekPriceTrend
} from "../services/data.js";
import {
  pigPriceLocateOptions,
  provinceAverageMaxPriceOptions,
  provincePriceTrendOptions,
  provinceWeekPriceTrendOptions
} from "../data/options.js";
import T3Echarts from "./T3Echarts.vue";
import MapEcharts from "./MapEcharts.vue";
import T6Echarts from "./T6Echarts.vue";

const typeClass = ref('')
const province = ref('')
const typeEnum = ['内三元', '外三元', '土杂猪']

let showProvinceMonthPriceTrend = ref(false)
const provinceMonthPriceTrend = ref([])
const provinceMonthPriceTrendFn = async () => {
  try {
    const res = await getGuangXiMonthPriceTrend({category: typeClass.value, province: province.value})
    // const res=await import('../data/t5.json')
    provinceMonthPriceTrend.value = res.data.map(item => {
      return {
        id: item[0],
        time: item[2],
        average: Number(item[3]).toFixed(1),
        max: item[4],
        min: item[5]
      }
    }).sort((a, b) => {
      const t1 = Number(a.time.replace('-', '').replace('-', ''))
      const t2 = Number(b.time.replace('-', '').replace('-', ''))
      return t1 - t2
    })
    provinceMonthPriceTrend.value.forEach(item => {
      provincePriceTrendOptions.value.xAxis.data.push(item.time)
      provincePriceTrendOptions.value.series[0].data.push(item.max)
      provincePriceTrendOptions.value.series[1].data.push(item.min)
      provincePriceTrendOptions.value.series[2].data.push(item.average)
    })
    showProvinceMonthPriceTrend.value = true
  } catch (err) {
    console.log(err)
  }
}

let showPigPriceLocate = ref(false)
const PigPriceLocate = ref([])
const getPigPriceLocateFn = async () => {
  try {
    const res = await getPigPriceLocate({category: typeClass.value, province: province.value})
    // const res = await import("../data/t2.json")
    res.data.forEach(item => {
      const obj = {
        id: item[0],
        province: item[1],
        name: item[2],
        min: Number(item[4]).toFixed(1),
        max: Number(item[5]).toFixed(1)
      }
      PigPriceLocate.value.push(obj)
    })
    PigPriceLocate.value.forEach(item => {
      pigPriceLocateOptions.value.xAxis.data.push(item.province + item.name)
      const p = [item.min, item.max, item.min, item.max]
      pigPriceLocateOptions.value.series[0].data.push(p)
      pigPriceLocateOptions.value.yAxis = {
        min: Math.min.apply(null, p) - 2, // 设置y轴的最小值为数据中的最小值
        max: Math.max.apply(null, p) + 2, // 设置y轴的最大值为数据中的最大值
        interval: 1 // 设置y轴的刻度间隔为5
      }
      showPigPriceLocate.value = true
    })

  } catch (err) {
    console.log(err)
  }
}

let showProvinceAverageMaxPrice = ref(false)
const provinceAverageMaxPrice = ref([])
const provinceAverageMaxPriceFn = async () => {
  try {
    let p
    const res = await getProvinceAverageMaxPrice({category: typeClass.value, province: province.value})
    // const res= await import("../data/t3.json")
    p = res.data.map(item => {
      return {
        id: item[0],
        province: item[1],
        value: Number(item[2]).toFixed(1)
      }
    })
    provinceAverageMaxPrice.value = p.sort((a, b) => parseFloat(b.value) - parseFloat(a.value));
    provinceAverageMaxPrice.value.forEach(item => {
      provinceAverageMaxPriceOptions.value.series[0].data.unshift(item.value)
      provinceAverageMaxPriceOptions.value.yAxis.data.unshift(item.province)
    })
    showProvinceAverageMaxPrice.value = true


  } catch (err) {
    console.log(err)
  }
}

let showProvinceWeekPriceTrend = ref(false)
const provinceWeekPriceTrend = ref([])
const provinceWeekPriceTrendFn = async () => {
  try {
    const res = await getWeekPriceTrend({category: typeClass.value, province: province.value})
    console.log(res.data)
    // const res=await import('../data/t5.json')
    provinceWeekPriceTrend.value = res.data.map(item => {
      return {
        id: item[0],
        time: item[2],
        average: Number(item[3]).toFixed(1),
        max: item[4],
        min: item[5]
      }
    }).sort((a, b) => {
      const t1 = Number(a.time.replace('-', '').replace('-', ''))
      const t2 = Number(b.time.replace('-', '').replace('-', ''))
      return t1 - t2
    })
    provinceWeekPriceTrend.value.forEach(item => {
      const obj = {
        product: item.time,
        max: item.max,
        min: item.min,
        average: item.average
      }
      provinceWeekPriceTrendOptions.value.dataset.source.push(obj)

    })
    showProvinceWeekPriceTrend.value = true
  } catch (err) {
    console.log(err)
  }
}


const submit = () => {
  provinceMonthPriceTrendFn()
  getPigPriceLocateFn()
  provinceAverageMaxPriceFn()
  provinceWeekPriceTrendFn()
}
</script>

<style scoped>

</style>